<template>
	<view>
		<view class="a-center order-top wid-100">
			<view class="mar-left40 mar-right40" v-if="formData.status==0">
				<view class="white-zt font-28 line-h38 font-w-b">待支付</view>
				<view class="white-zt font-26 mar-top10 line-h38">请您尽快付款，否则订单将被取消！</view>
			</view>
			<view class="mar-left40 mar-right40" v-if="formData.status==1">
				<view class="white-zt font-28 line-h38 font-w-b">待激活</view>
				<view class="white-zt font-26 mar-top10 line-h38">订单支付成功，您可以随时激活套餐后预约服务！</view>
			</view>
			<view class="mar-left40 mar-right40" v-if="formData.status==2">
				<view class="white-zt font-28 line-h38 font-w-b">申请退款</view>
				<view class="white-zt font-26 mar-top10 line-h38">您正在申请退款中，请耐心等待工作人员确认！</view>
			</view>
			<view class="mar-left40 mar-right40" v-if="formData.status==3">
				<view class="white-zt font-28 line-h38 font-w-b">已驳回</view>
				<view class="white-zt font-26 mar-top10 line-h38">您申请的退款已被驳回，请联系客服确认！</view>
			</view>
			<view class="mar-left40 mar-right40" v-if="formData.status==4">
				<view class="white-zt font-28 line-h38 font-w-b">已退款</view>
				<view class="white-zt font-26 mar-top10 line-h38">您申请的退款已到账，请及时确认！</view>
			</view>
			<view class="mar-left40 mar-right40" v-if="formData.status==5">
				<view class="white-zt font-28 line-h38 font-w-b">关闭</view>
				<view class="white-zt font-26 mar-top10 line-h38">订单已关闭，您可以重新下单！</view>
			</view>
			<view class="mar-left40 mar-right40" v-if="formData.status==6">
				<view class="white-zt font-28 line-h38 font-w-b">已激活</view>
				<view class="white-zt font-26 mar-top10 line-h38">订单已已激活，您可以前往待预约清单选择预约服务！</view>
			</view>
			<view class="mar-left40 mar-right40" v-if="formData.status==7">
				<view class="white-zt font-28 line-h38 font-w-b">已赠送</view>
				<view class="white-zt font-26 mar-top10 line-h38">订单已赠送，您可以前往赠送清单查看！</view>
			</view>
			<view class="mar-left40 mar-right40" v-if="formData.status==8">
				<view class="white-zt font-28 line-h38 font-w-b">服务已完结</view>
				<view class="white-zt font-26 mar-top10 line-h38">订单服务已完结，您可以重新下单！</view>
			</view>
		</view>
		<!-- 商品信息 -->
		<view class="wid-100 shop white-bj pad-t-40  pad-b-40 pad-l-30 pad-r-30 mar-top20 box-sizing">
			<view class="a-center">
				<view class="logo overflow-hidden border-r-5"><image :src="business.logo" mode="widthFix" lazy-load></image></view>
				<view class="font-28 mar-left10">{{business.name}}</view>
			</view>
			<view class="d-flex mar-top40">
				<view class="left border-r-10 overflow-hidden"><image :src="prolist[0].pic" mode="widthFix" lazy-load></image></view>
				<view class="right mar-left30">
					<view class="font-28 text-overflow font-w-b">{{prolist[0].name}}</view>
					<view class="font-22 black60-zt mar-top20">规格: {{prolist[0].ggname}}</view>
					<view class="a-center j-sp mar-top20">
						<view class="a-end">
							<view class="main-zt font-24 font-w-b">¥<text class="font-32">{{formData.totalprice}}</text></view>
						</view>
						<view class="font-34 black40-zt">
							<text>x</text>
							<text class="mar-left5">{{formData.num}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="wid-100 shop white-bj pad-t-40  pad-b-40 pad-l-30 pad-r-30 mar-top20 box-sizing">
				<view class="a-center j-sp font-28 mar-bottom50">
					<view>订单编号</view>
					<view>
						<text>{{formData.ordernum}}</text>
					</view>
				</view>
				<view class="a-center j-sp font-28 mar-bottom50">
					<view>下单时间</view>
					<view>
						<text>{{formData.createtime|timeStanp}}</text>
					</view>
				</view>
				<view class="a-center j-sp font-28 mar-bottom50">
					<view>支付方式</view>
					<view>
						<text>{{formData.paytype}}</text>
					</view>
				</view>
				<view class="a-center j-sp font-28 mar-bottom50">
					<view>支付时间</view>
					<view>
						<text>{{formData.paytime|timeStanp}}</text>
					</view>
				</view>
				<view class="a-center j-sp font-28">
					<view>状态</view>
					<view>
						<text>{{formData.status|status}}</text>
					</view>
				</view>
		</view>
		<view class="wid-100 shop white-bj pad-t-40  pad-b-40 pad-l-30 pad-r-30 mar-top20 box-sizing">
			<view class="a-center j-sp font-28 mar-bottom50">
				<view>商品金额</view>
				<view class="main-zt mar-right10 font-w-b">
					<text>¥</text>
					<text> {{formData.product_price}}</text>
				</view>
			</view>
			<view class="a-center j-sp font-28 mar-bottom50" v-if="formData.leveldk_money>0">
				<view>等级优惠</view>
				<view class="main-zt mar-right10 font-w-b">
					<text>- ¥</text>
					<text> {{formData.leveldk_money}}</text>
				</view>
			</view>
			<view class="a-center j-sp font-28 mar-bottom50" v-if="formData.coupon_money>0">
				<view>优惠券</view>
				<view class="main-zt mar-right10 font-w-b">
					<text>- ¥</text>
					<text> {{formData.coupon_money}}</text>
				</view>
			</view>
			<view class="a-center j-sp font-28" :class="{'mar-bottom50':juan.id>0}">
				<view>实际支付</view>
				<view class="main-zt mar-right10 font-w-b">
					<text>¥</text>
					<text> {{formData.totalprice}}</text>
				</view>
			</view>
			<view class="a-center j-sp font-28 mar-bottom50" v-if="juan.id>0">
				<view>捐助对象</view>
				<view class="mar-right10">
					<text class="font-24"> {{juan.juan_name}}</text>
				</view>
			</view>
			<view class="a-center j-sp font-28" v-if="juan.id>0">
				<view>捐助金额</view>
				<view class="activeColor mar-right10">
					<text>¥</text>
					<text> {{juan.juan_price}}</text>
				</view>
			</view>
		</view>
		
		<view class="heightTop"></view>
		<view class="heightTop"></view>
		<!-- 底部操作 -->
		<view class="foot position-fixed p-bottom wid-100 white-bj a-center pad-l-30 pad-r-30 pad-t-30 pad-b-30 font-26 box-sizing">
			<view class="jdhong-bj border-r pad-l-30 pad-r-30 pad-t-10 pad-b-10 white-zt mar-right15 mar-bottom20" v-if="formData.status==0" @tap="pay(formData)">支付</view><!-- 支付 -->
			<view class="black50-bj border-r pad-l-30 pad-r-30 pad-t-10 pad-b-10 white-zt mar-right15 mar-bottom20" v-if="formData.status==0" @tap="cancel(formData)">取消</view><!-- 取消 -->
			<view class="jdhong-bj border-r pad-l-30 pad-r-30 pad-t-10 pad-b-10 white-zt mar-right15 mar-bottom20" v-if="formData.status==1" @tap="openTan('jihuo',item)">激活套餐</view><!-- 激活套餐 -->
			<!-- <view class="chengse-bj border-r pad-l-30 pad-r-30 pad-t-10 pad-b-10 white-zt mar-right15 mar-bottom20" v-if="formData.status==1"  @tap="open('refund',item)">赠送套餐</view> --><!-- 赠送套餐 -->
			<view  class="border-2 border-r pad-l-30 pad-r-30 pad-t-10 pad-b-10 main-zt mar-right15 mar-bottom20"  v-if="formData.status==1||formData.status>=4" @tap="del(item)">删除</view><!-- 删除 -->
		</view>
		<!-- 弹窗 -->
		<view class="position-fixed p-bottom p-left p-right p-top black100-50" v-if="showLoding" @tap="close"></view>
		<view class="wid-100  white-bj fuwu-foot position-fixed p-bottom box-sizing" :style="{height:heightFoot+'px'}" v-if="showLoding">
			<view class="position-relative">
				<view class="text-center">{{footTitle}}</view>
				<view class="icon iconfont icon-guanbi2 position-absolute p-right p-top" @tap="close"></view>
			</view>
			<!-- 套餐 -->
			<view class="mar-top50 coupon-foot">
				<view class="coupon-item a-center j-sp pad-t-30 pad-b-30 box-sizing" v-for="(item,index) in prolist"  :key="index">
					<view class="left">
						<view class="main-zt font-28 font-w-b">{{item.name}}</view>
						<view class="font-24 black60-zt mar-top15">{{item.ggname}}</view>
					</view>
					<view class="right mar-left20">
						<view class="a-center">
							<view class="font-24 main-bj border-r-10 line-h40 pad-l-20 pad-r-20 box-sizing d-inline-block white-zt" v-if="item.status==1&&isjihuo==1" @tap="Receber(item)">激活</view>
							<view class="font-24 main-bj border-r-10 line-h40 pad-l-20 pad-r-20 box-sizing d-inline-block white-zt" v-else-if="item.status==1&&isjihuo==2">赠送</view>
							<view class="black60-zt btnCoupon border-r-10 font-24 line-h40 pad-l-20 pad-r-20 black93-bj" v-else>已激活/赠送</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				id:undefined,
				showLoding:false,
				formData:{
					status:0,
					linkman:"",
					address:"",
					area2:""
				},
				prolist:[],
				business:{},
				taoList:[],
				juan:{},
				curId:0,
				isjihuo:1
			}
		},
		filters:{
			
			timeStanp(dataTime){
				if (dataTime === undefined) { return ""}
				if(dataTime==0){return ""}
				  const time = dataTime
				  const unixTimestamp = new Date(time * 1000)
				  const commonTime = unixTimestamp.toLocaleString('en-GB', { hour12: false })
				  const tim = commonTime.split('/')
				  const year = tim[2].split(',')[0]
				  const month = tim[1]
				  const day = tim[0]
				  const tt = tim[2].split(',')[1]
				  if (time === '') {
				    return ''
				  } else {
				    return year + '/' + month + '/' + day + tt
				  }
			},
			status(data){
				if(data==""){return}
				if(data==0){
					return "待支付"
				}else if(data==1){
					return "待激活"
				}else if(data==2){
					return "申请退款"
				}else if(data==3){
					return "已驳回"
				}else if(data==4){
					return "已退款"
				}else if(data==5){
					return "关闭"
				}
			}
		},
		onLoad(e) {
			this.id=parseFloat(e.id)
			this.GetOrderData()
		},
		methods:{
			//打开弹窗
			openTan(type,Obj){
				if(type=="jihuo"){
					this.isjihuo=1
				}else if(type=="zengsong"){
					this.isjihuo=2
				}
				this.showLoding=true
			},
			//关闭弹窗
			close(){
				this.curId=0
				this.isjihuo==1
				this.showLoding=false
			},
			//激活套餐
			Receber(Obj){
				const one={
					id:Obj.id
				}
				uni.showModal({
					title:'提示',
					content:'套餐激活后，可以前往待预约列表选择服务预约，同时激活后不支持退款哟～',
					cancelText:"取消",
					confirmText:"确定",
					success: (res) => {
						if (res.confirm) {
							this.$api.ActivationFuOrder(one).then(res1=>{
								uni.showToast({
									icon:"success",
									title:"套餐已激活!",
									duration:2000
								})
								setTimeout(()=>{
									uni.redirectTo({
										url:'/pagesC/orderfu/package?index=3'
									})
								},1000)
							})
						}
					}
				})
			},
			//支付
			pay(Obj){
				if(Obj.paytypeid==1){
					const create_order_sign=JSON.parse(Obj.create_order_sign)
					//微信支付
					uni.requestPayment({
						provider:"wxpay",
						timeStamp:create_order_sign.timestamp,
						nonceStr:create_order_sign.noncestr,
						package:create_order_sign.package,
						signType:'MD5',
						paySign:create_order_sign.sign,
						success:(item)=>{
							if(item.errMsg=="requestPayment:ok"){
								uni.showLoading({
									title:"支付中..."
								})
								setTimeout(()=>{
									uni.hideLoading()
									this.query.page=1
									this.list=[]
									this.getOrder()
								},2000)
							}
						}
					})
				}
			},
			//取消订单
			cancel(Obj){
				const one={
					id:Obj.id
				}
				uni.showModal({
					title:'提示',
					content:'您确定要取消该订单吗？',
					cancelText:"取消",
					confirmText:"确定",
					success: (res) => {
						if (res.confirm) {
							this.$api.CancelFuOrder(one).then(res1=>{
								uni.showToast({
									icon:"success",
									title:"订单已取消!",
									duration:2000
								})
								this.list=[]
								this.getOrder()
							})
						}
					}
				})
			},
			//删除订单
			del(Obj){
				const one={
					id:Obj.id
				}
				uni.showModal({
					title:'提示',
					content:'您确定要删除该订单吗？',
					cancelText:"取消",
					confirmText:"确定",
					success: (res) => {
						if (res.confirm) {
							this.$api.DelFuOrder(one).then(res1=>{
								uni.showToast({
									icon:"success",
									title:"订单已删除!",
									duration:2000
								})
								this.list=[]
								this.getOrder()
							})
						}
					}
				})
			},
			//支付订单
			pay(Obj){
				const one=[
					{orderid:Obj.id,ordernum:Obj.ordernum,payorderid:Obj.payorderid}
				]
				let status=2
				if(Obj.list.length>1){
					status=1
				}else{
					status=2
				}
				uni.navigateTo({
					url:'/pages/pay/pay?id='+JSON.stringify(one)+'&total='+Obj.totalprice+'&status='+status
				})
			},
			//获取订单详情
			async GetOrderData(){
				const one={
					id:this.id
				}
				await this.$api.GetFuOrderShow(one).then(res=>{
					this.formData=res.data.show
					this.prolist=res.data.pro_list
					this.business=res.data.business_data
					this.juan=res.data.juan
				})
			}
		}
	}
</script>

<style lang="scss">
	body{
	    background-color: #f6f6f6;  
	} 
	image{
		width: 100%;
		display: block;
	}
	.order-top{
		height: 220rpx;
		background: url("../../static/ordertop.png") no-repeat;
		background-size: 100%;
	}
	.address{
		border-bottom-left-radius: 25rpx;
		border-bottom-right-radius: 25rpx;
		.you{
			.icon-jinrujiantou1{
				font-size: 40rpx;
			}
			.icon-dingwei{
				font-size: 50rpx;
			}
		}
		
	}
	.shop{
		border-radius: 25rpx;
		.logo{
			width: 30rpx;
			height: 30rpx;
		}
		.left{
			width: 175rpx;
			height: 175rpx;
		}
		.right{
			width: 505rpx;
		}
		textarea{
			height: 150rpx;
			padding: 20rpx 30rpx;
		}
	}
	.ljm-checkbox{
		width: 30rpx;
		height: 30rpx;
		border: 2rpx solid #999999;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.ljm-checkbox.ljm-checkbox-active{
		background-color: #e5353f;
		border: 2rpx solid #e5353f;
	}
	.ljm-checkbox .icon-duihao{
		font-size: 22rpx;
	}
	
	.fuwu-foot{
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		padding: 30rpx 50rpx;
		.recharge-box{
			.recharge-item{
				width: 220rpx;
				padding: 35rpx 0;
				border: 2rpx solid #e6e6e6;
				margin-right: 20rpx;
				&:last-child{
					margin-right: 0rpx;
				}
				&.active{
					background: #fdf0e1;
					border: 2rpx solid #f37c4d;
					color: #ff4730;
					.daozhang{
						color: #ff4730 !important;
					}
				}
				.deliver{
					background: linear-gradient(270deg, #f37c4d 0%, #ff4730 100%);
					border-top-left-radius: 100rpx;
					border-top-right-radius: 100rpx;
					border-bottom-right-radius: 100rpx;
					padding: 6rpx 13rpx;
					top: 0;
					right: -20rpx;
					font-size: 18rpx;
					line-height: 18rpx;
				}
			}
		}
		.bottom{
			width: 660rpx;
			bottom: 50rpx;
			.cart{
				background-color: #7f72fa;
			}
		}
	}
</style>